<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<jigsaw-combo-select [(value)]="rangeTimeComboValue" openTrigger="click" closeTrigger="click">
    <ng-template>
        <jigsaw-range-time [(beginDate)]="beginDate"
                           [(endDate)]="endDate"
                           (change)="handleRangeDateChange()">
        </jigsaw-range-time>
    </ng-template>
</jigsaw-combo-select>
<jigsaw-select [(value)]="selectedCityForSelect1"
               placeholder="请选择城市"
               [data]="cityListForSelect">
</jigsaw-select>
<jigsaw-button width="180px" [jigsawTooltip]="tooltipMessage">
    鼠标挪到这里显示tooltip
</jigsaw-button>
<j-button (click)="popupTemplateDialog(tpDialog)">popup dialog</j-button>

<j-drawer position="left">
    <div *ngFor="let i of [1,2,3,4,5,6]" class="drawer-content">
        这是一个展示内容的box
    </div>
</j-drawer>

<ng-template #tpDialog>
    <jigsaw-dialog width="50%" (close)="onAnswer()">
        <div jigsaw-title>
            <span class="fa fa-thumbs-up"></span>定义在template中的对话框
        </div>
        <div jigsaw-body style="padding: 10px;height: 300px">
            <jigsaw-combo-select [(value)]="singleTimeComboValue" width="150px" openTrigger="click"
                                 closeTrigger="click">
                <ng-template>
                    <jigsaw-time [(date)]="date" (dateChange)="handleDateChange($event)">
                    </jigsaw-time>
                </ng-template>
            </jigsaw-combo-select>
            <jigsaw-select [(value)]="selectedCityForSelect2"
                           placeholder="请选择城市"
                           [data]="cityListForSelect">
            </jigsaw-select>
            <jigsaw-button width="180px" [jigsawTooltip]="tooltipMessage">
                鼠标挪到这里显示tooltip
            </jigsaw-button>
            <j-button (click)="popupAlert()">popup alert</j-button>
        </div>
        <div jigsaw-button-bar>
            <jigsaw-button colorType="primary" (click)="onAnswer('OK')">OK</jigsaw-button>
            <jigsaw-button (click)="onAnswer('Cancel')">Cancel</jigsaw-button>
        </div>
    </jigsaw-dialog>
</ng-template>
